<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="G">SGGGG</button>
    <span class="X">ssGGGGG</span>
    <span class="X">sGGGGG</span>
    <span class="X">sGGGGG</span>
    <span class="X">sGGGGG</span>
    <span class="X">sGGGGG</span>
    <form action="">
      <input type="text" name="username" />
      <input type="radio" name="gender" id="" value="male" />
      <input type="radio" name="gender" id="" value="female" />
    </form>

    <script>
      /* 
            元素节点对象(element)
                - 在网页中,每一个标签都是一个元素节点
                - 如何获取元素节点对象?
                    1. 通过document对象来获取元素节点
                    2. 通过document对象来创建元素节点
                - 通过document来获取已有的元素节点:
                    document.getElementByID()
                        - 根据id获取一个元素节点对象
                    document.getElementsByCalssName()
                        - 根据元素的class属性值来获取一组元素节点对象
                        - 返回的是一个类数组对象
                        - 该方法返回的结果是一个实时更新的集合
                            当王爷中新添加元素时,集合也会实时的刷新
                    document.getElementsByTagName()
                        - 根据标签名获取一组元素节点对象
                        - 返回的结果是可以实时更新的集合
                        - document.getElementByTagName("*") 可以用来获取页面中所有的元素
                    document.getElementsByName()
                        - 根据name属性获取一组元素节点对象
                        - 返回一个实时更新的集合
                        - 主要用于表单项
                    document.querySelectorAll()
                        - 根据选择器去页面查询元素(标签)
                        - 会返回一个类数组(不会实时更新)
                    document.querySelector()
                        - 根据选择器去页面中查询第一个符合条件的元素
                - 创建一个元素节点
                    document.createElement()
                        - 根据标签名创建一个元素节点对象
                
        */
      let btns = document.getElementById('G');
      //    会实时更新,假如增加了多一个新的class为X的元素,则也会同步到spans内
      let spans = document.getElementsByClassName('X');
      let spanss = document.getElementsByTagName('span');
      let DocumentAll = document.getElementsByTagName('*');
      let id1 = document.querySelectorAll('span');
      let id2 = document.querySelector('span');
      let div = document.createElement('div');
    </script>
  </body>
</html>
